<script setup>
import axios from "axios";

import {ref} from "vue";

let data = ref({
  code: '',
  content: ''
})


// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log(config)
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});





// 基本的get请求
// 在异步函数体内 可以通过await等待请求完成后在继续执行
axios.get(
    // 请求地址
    'api',
    // 请求的配置
    {
      // 请求参数 可以直接放在地址栏进行拼接
      // params: {
      //   format: 'json'
      // }
    })
    .then(function (response) {
      // 处理成功情况
      // console.log(response.data);
      const result = response.data
      data.value.code = result.code
      data.value.content = result.content
    })
    .catch(function (error) {
      // 处理错误情况
      console.log(error);
    })
    .finally(function () {
      // 总是会执行
      console.log(1111)
    });

// post请求
// axios.post('https://api.uomg.com/api/rand.qinghua',
//     // post请求 携带参数 使用data
//     {
//       format: 'json',
// })
//     .then(function (response) {
//       // console.log(response);
//     })
//     .catch(function (error) {
//       console.log(error);
//     });

// 使用解构 来获取并发请求
// const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);

// 通过css选择器获取 form表单中的id属性
// 如果需要传递表单数据 后端接收的数据 和表单中的name保持一致
// const {data} = await axios.post('/user', document.querySelector('#my-form'), {
//   headers: {
//     'Content-Type': 'application/json'
//   }
// })








</script>

<template>
  {{ data }}
</template>

<style scoped>

</style>
